<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单发布留言板案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        textarea{
            margin: 100px 0 0  100px ;
        }
        li{
            list-style: none;
            width: 600px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
            margin-left:100px;
            margin-top:100px;
        }

    </style>
</head>
<body>
    <!-- 分析  核心思路 点击按钮后 就动态创建一个li 添加到ul里面去
          创建li的同时 把文本域里面的值通过 li.innerHTML 赋值给 li
          如果想要新的留言 后面显示就用 appendChild 如果想要前面显示就用 insertBefore
     -->

     <textarea name="" id="" cols="30" rows="10"></textarea>
     <button>发布</button>
     <ul>
         
     </ul>
     <script>
        //  1 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2 点击按钮 就可以新建一个小li
        btn.onclick = function(){
            if(text.value == ''){
                alert('您没有输入内容');
                return false;
        }else{
            // 创建元素
            var li = document.createElement('li');
            //  先有li 才能赋值
             li.innerHTML = text.value;
            // 添加元素
            // ul.appendChild(li);   
            ul.insertBefore(li,ul.children[0]);
        }

        }
     </script>

</body>
</html>